<template>
    <a-card class="printer-test" hoverable style="height:100%; overflow:auto">
        <a-form layout="horizontal">
            <a-form-item label="选择打印机" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-select v-model="printer_selected">
                    <a-select-option v-for="(item, index) in printer_list" :key="index">{{item}}</a-select-option>
                </a-select>
            </a-form-item>
        </a-form>

        <div class="print-area">
            <div class="print-info">
                <h4>打印操作：</h4>
                <div>
                    <a-button @click="print_view">打开打印</a-button>&nbsp;
                    <a-button @click="print_close" type="danger">关闭</a-button>&nbsp;
                    <a-button @click="print_do" type="primary">打印</a-button>
                </div>
            </div>
            <!-- <div class="print-review">
                <h3>打印预览：</h3>
                <a-card hoverable style="height: 400px;" :bodyStyle="{height:'100%', padding: 0}">
                </a-card>
            </div> -->
        </div>
    </a-card>
</template>

<script lang="ts" src="./Printer.vue.ts" />

<style lang="less" scoped>
.print-area {
    display: flex;
    flex-direction: row;
    > .print-info {
        flex-grow: 1;
    }
    > .print-review {
        width: 375px;
        webview {
            height: 100%;
        }
    }
}
</style>
